import React from "react";

type P = {
    scale: string;
    temperature: string;
    onChange: (temperature: string, scale: string) => void;
}

const scaleNames: { [k: string]: string; } = {
    c: '摄氏温度',
    f: '华氏温度'
};

export default class TemperatureInput extends React.Component<P> {
    handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const temperature = e.target.value
        // 调用父级事件 - 修改父级参数值
        this.props.onChange(temperature, this.props.scale)
    }
    render() {
        const temperature = this.props.temperature;
        const scale = this.props.scale;
        return (
            <fieldset>
                <legend>{scaleNames[scale]}:</legend>
                <input value={temperature} type="number" onChange={this.handleChange} />
            </fieldset>
        );
    }
}